<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="courseQuery.title" placeholder="课程名" />
      </el-form-item>

      <el-form-item label="课程类别">
        <!-- 一级分类 -->
        <el-select
          @change="getTwoByOneId(courseQuery.subjectParentId)"
          v-model="courseQuery.subjectParentId"
          placeholder="一级分类"
        >
          <el-option
            v-for="subject in oneSubjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
        <!-- 二级分类 -->
        <el-select v-model="courseQuery.subjectId" placeholder="二级分类">
          <el-option
            v-for="subject in twoSubjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>


      <el-button
        type="primary"
        icon="el-icon-search"
        @click="getCourseList()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
      row-class-name="myClassList"
    >
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{
          (page - 1) * limit + scope.$index + 1
        }}</template>
      </el-table-column>

      <el-table-column label="课程信息" width="470" align="center">
        <template slot-scope="scope">
          <div class="info">
            <div class="pic">
              <img :src="scope.row.cover" alt="scope.row.title" width="150px" />
            </div>
            <div class="title">
              <!-- <a href>{{ scope.row.title }}</a> -->
              <p>{{ scope.row.title }}</p>
              <p>{{ scope.row.lessonNum }}课时</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">{{
          scope.row.gmtCreate.substr(0, 10)
        }}</template>
      </el-table-column>
      <el-table-column label="发布时间" align="center">
        <template slot-scope="scope">{{
          scope.row.gmtModified.substr(0, 10)
        }}</template>
      </el-table-column>
      <el-table-column label="价格" width="100" align="center">
        <template slot-scope="scope">
          {{
            Number(scope.row.price) === 0
              ? "免费"
              : "¥" + scope.row.price.toFixed(2)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="buyCount"
        label="付费学员"
        width="100"
        align="center"
      >
        <template slot-scope="scope">{{ scope.row.buyCount }}人</template>
      </el-table-column>

      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <router-link :to="'/course/add/' + scope.row.id">
            <el-button type="text" size="mini" icon="el-icon-edit"
              >编辑课程信息</el-button
            >
          </router-link>
          <router-link :to="'/course/chapter/' + scope.row.id">
            <el-button type="text" size="mini" icon="el-icon-edit"
              >编辑课程大纲</el-button
            >
          </router-link>
          <el-button type="text" size="mini" @click="delCourseById(scope.row.id)" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getCourseList"
    />
  </div>
</template>

<script>
import course from "@/api/course";
import subject from "@/api/subject";
export default {
  data() {
    return {
      listLoading: true, //是否显示loading信息
      list: [], //课程数据列表
      page: 1, //页码
      limit: 10, //每页记录数
      total: 0, //总记录数
      courseInfo: {}, //课程id
      courseQuery: {
        subjectParentId: "", //一级课程专业id
        subjectId: "", //二级课程专业id
        title: "", //课程标题
        teacherId: "", //老师id
      }, //查询条件
      //用于数据回显，等到时候让用户下拉列表选择专业查询
      oneSubjectList: [], //一级课程专业
      twoSubjectList: [], //二级课程专业
    };
  },
  created() {
    this.getCourseList();
    this.getAllSubjectInfo();
  },
  methods: {
    // 带条件分页查询
    getCourseList(current = 1) {
      course
        .getCourseInfoPage(current, this.limit, this.courseQuery)
        .then((response) => {
          this.list = response.data.courseList;
          this.total = response.data.total;
          this.listLoading = false;
        });
    },
   //二级课程分类
    getTwoByOneId(oneId) {
      this.courseQuery.subjectId = " ";
      for (let i = 0; i < this.oneSubjectList.length; i++) {
        let oneSubject = this.oneSubjectList[i];
        if (oneSubject.id === oneId) {
          this.twoSubjectList = oneSubject.children;
        }
      }
    },
    // 一级课程分类
    getAllSubjectInfo() {
      subject.getSubject().then((response) => {
        this.oneSubjectList = response.data.listSubject;
      });
    },
    //清空查询框
   resetData(){
    this.courseQuery={}
    this.getCourseList()
   },
   //根据id删除课程相关信息
   delCourseById(id){
 this.$confirm("此操作将永久删除该课程信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          course.delCourseInfo(id).then(response => {
            //删除成功
            console.log("删除成功");
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            //刷新页面
            this.getCourseList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
   }
  },
};
</script>